<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    
    <script>
    // vue响应式原理
    // 第一步 数据劫持  
    // vue2中用到了Object.defineProperty的方法(ES5)

    // 通过这个方法
    var obj = {
        age: 10

    }

    // obj.name = "jack";
    // 静态方法，接收3个参数,(修改的对象，字符串/symbol,描述符对象)

    // _是私有属性
    Object.defineProperty(obj,"_name",{
        value: "jack",//只能读不可写
        writable: true,//是否可写，默认为false,不可写
        enumerable: false,//是否可枚举的（是否可遍历）
    })

    // console.log(obj);
    // console.log({...obj});

    // 数据劫持
    Object.defineProperty(obj,"name",{
        // getter
        // 当外面试图访问obj对象的name属性，直接调用get方法，返回get方法的返回值
        // 这两个方法不可以迭代
        get(){
            console.log("name的getter被访问了！");
            // return "hello vue"
            // this指向obj
            // 好像以为是访问的name，其实是根据get函数来指定返回值
            return this._name;
        },
        // setter
        set(val){
            console.log(val);//robin
            this._name = val.toUpperCase();

        }
    })
    console.log(obj.name)
    obj.name = "robin"
    console.log(obj.name);
    console.log(obj);



    var vm = new Vue({
        template:`<div>{{num}}</div>`,
        data: {
            num: 0
        }
    })

    console.log(vm.$data)

    // Object.defineProperty(vm.$data, 'num', {
    //     // getter  data的属性的getter中  进行了：依赖收集    
    //     get() {          
         
    //     },
    //     // setter    通知所有的依赖项，num改变
    //     set(val) {
           
    //     }
    // })


    </script>
    </script>
</body>
</html>